<template>
	
	<view class="daily_paper">
		<uni-nav-bar title="日报" :statusBar="true" leftIcon="back" :fixed="true" @clickLeft="navback"></uni-nav-bar>
		<uni-calendar :insert="true" @change="change" :lunar="true" />
		<!-- <view v-if="hours" class="full_width flex_row al_center mg_bt_70" v-for="(item,ind) in hours" :key="ind">
			<text class="time_txt mg_lt_30">{{item.text}}时</text>
			<view :class="item.checked?'flex_1 center_back_select':'flex_1 center_line'" @tap="toreporShow(item)">
				<text>{{item.checked?(computedType(item.type)+'汇报'):''}}</text>
			</view>
		</view>
		<view v-else>
			<text>no data found!no data found!no data found!no data found!no data found!no data found!no data found!no data
				found!no data found!</text>
		</view> -->

		<view class="set_box" v-for="(item,index) in hoursList" :key="index" >
			<view class="set_time">
				<view>{{item.hour}}时段</view>
			</view>
			<!-- 步骤条 -->
			<view class="set-1">
				<view class="set-2">
					<view class="tlak_o" v-for="(cItem,index_) in item.children" :key="index_" @tap="toreporShow(cItem)">
						<view class="docter like_">
							<view class="doc_say like_o">
								<view class="doc_head like_h">
									<text class="doc_name name_">{{cItem.createrName}}</text>
									<text class="doc_time time_">{{cItem.datetime}}</text>
								</view>
								<view class="doc_talk like_talk">
									<text>{{(computedType(cItem.type)+'汇报')}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出popwindow选项框 -->
		<view class="addPaper flex_row just_center al_center" @tap="openPoup">
			<uni-icons type="plusempty" size="20" color="#fff"></uni-icons>
		</view>
		<uni-popup ref="options" type="bottom">
			<view class="select_options flex_col">
				<view class="flex_row flex_1 al_stretch mg_lt_40 mg_tp_20" @tap="toWorkreport">
					<view class="flex_col just_center">
						<image class="circle_item" src="@/static/images/start_work.png"></image>
					</view>
					<view class="flex_col just_center flex_1 option_item mg_lt_30">
						<text>上班汇报</text>
					</view>
				</view>
				<view class="flex_row flex_1 al_stretch mg_lt_40 " @tap="toTimeReport">
					<view class="flex_col just_center">
						<image class="circle_item" src="@/static/images/real_time.png"></image>
					</view>
					<view class="flex_col just_center flex_1 option_item mg_lt_30">
						<text>实时汇报</text>
					</view>
				</view>
				<view class="flex_row flex_1 al_stretch mg_lt_40" @tap="tooffWork">
					<view class="flex_col just_center">
						<image class="circle_item" src="@/static/images/off_work.png"></image>
					</view>
					<view class="flex_col just_center flex_1 option_item mg_lt_30">
						<text>下班汇报</text>
					</view>
				</view>
				<view class="flex_1 flex_row just_end al_center" @tap="closePoup">
					<uni-icons class="mg_rt_40" type="closeempty" color="#0877D5" size="22"></uni-icons>
				</view>
			</view>
		</uni-popup>

		<!-- <w-loading text="loading..." mask="true" click="false" ref="loading"></w-loading> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import permision from "@/js_sdk/wa-permission/permission.js";
	import arraycontains from "@/common/js/common.js";

	let _this;

	export default {
		data() {
			return {
				dailys: [],
				hours: [],
				loading: false,
				hoursList:[]
			};
		},
		components: {
			uniNavBar,
			uniCalendar,
			uniIcons,
			uniPopup
		},
		computed: {
			// ...mapState['refreshFlag']
			...mapState(['refreshFlag'])
		},
		methods: {
			...mapMutations(['setRefresh']),
			toreporShow(item) {
				if (item.id == null || item.id == '') {
					return;
				}
				this.$utils.navto("../report_show/report_show?type=" + item.type + "&id=" + item.id)
			},
			navback() {
				this.$utils.navBack()
			},
			toWorkreport() {
				this.$utils.navto("../work_report/work_report");
				this.closePoupDelayed();
			},
			tooffWork() {
				this.$utils.navto("../off_report/off_report")
				this.closePoupDelayed();
			},
			toTimeReport() {
				this.$utils.navto("../time_reporting/time_reporting")
				this.closePoupDelayed();
			},
			openPoup() {
				this.$refs.options.open()
			},
			closePoup() {
				this.$refs.options.close()
			},
			closePoupDelayed() {
				setTimeout(() => {
					this.$refs.options.close()
				}, 500)
			},
			change(e) {
				let nDate = e.fulldate.split('-').join('/') + ' 00:00:00'
				let nowDate = new Date(nDate).getTime();
				this.getdaysList(nowDate)
			},
			computedType(type) {
				var name = ''
				if (type == 'pm') {
					name = '下班前'
				} else if (type == 'report') {
					name = '实时'
				} else {
					name = '上班'
				}
				return name
			},
			inithours() {
				let length =_this.dailys.length;
				if (length <= 0) {
					console.log('inithours return   ');
					return;
				}
				var containerList = [];
				//记录不重复小时的角标
				for (let i = 0; i < length; i++) {
					
					if(!containerList.contains(_this.dailys[i].hour))
					{
						containerList.push(_this.dailys[i].hour);
					}
				}
				
				let hourContainerLength = containerList.length;
				if(hourContainerLength == 0)
				{
					console.log('hourContainerLength == 0');
					return;
				}
				
				_this.hours =  [];
				for (let x = 0; x < hourContainerLength; x++) {
					_this.hours.push({
						text: x,
						checked: false,
						data:[],
						hour:containerList[x]
					})
				}
				// console.log('inithours3 enter = '+JSON.stringify(_this.hours));
			},
			getdaysList(date) {
				let _this = this
				if (this.loading) {
					return;
				}
				
				let uid = uni.getStorageSync('userInfo').uid;
				this.loading = true
				let data = {
					roles: 'driver',
					uid: uid,
					time: date,
					dateOrhour: 'date'
				}
				console.log("uid="+uid);
				this.$utils.http.post('/dailywork/list/driver/'+uid+'/' + date + '/date', {data: data})
					.then(res => {
						this.loading = false
						// this.$refs.loading.close()
						console.log(JSON.stringify(res));
						if (res.code === 200) {
							//console.error(res.data)
							if (res.data != null && res.data.length > 0) {
								this.dailys = res.data.map(item => {
									item.hour = this.$utils.format(new Date(item.createTime), 'hh');
									item.datetime = this.$utils.format(new Date(item.createTime), 'yyyy-MM-dd HH:mm:ss');
									return item
								})
								//小时去重
								// [0,1,2,3,4,5,6,7...9]
								let dayHourList = this.dailys.filter((item,index,array)=>{
									return array.findIndex(xtem=>{
										return xtem.hour == item.hour
									}) === index
								})
								// [8,9]
								dayHourList.forEach(item=>{
									item.children = []
									_this.dailys.forEach(xtem=>{
										if(item.hour==xtem.hour){
											item.children.push(xtem)
										}
									})
								})
								
								console.error(dayHourList)
								this.hoursList = dayHourList
							}else{
								this.hoursList = []
							}
						}

					}).catch(err => {
						this.loading = false
						// this.$refs.loading.close()
					})
			},
			refreshPageByDate() {
				let mydate = this.$utils.format(new Date(), 'yyyy/MM/dd')
				let nowDate = new Date(mydate + ' 00:00:00').getTime();
				this.getdaysList(nowDate)
			},
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID)
				var strStatus
				if (result == 1) {
					strStatus = "已获得授权"
				} else if (result == 0) {
					strStatus = "未获得授权"
					uni.showModal({
						title: '请获取位置服务权限',
						content: '',
						success: function(res) {
							if (res.confirm) {
								console.log('requestAndroidPermission 用户点击确定');
								permision.gotoAppPermissionSetting();
							} else if (res.cancel) {
								console.log('requestAndroidPermission 用户点击取消');
							}
						}
					});
				} else {
					strStatus = "被永久拒绝权限"
					uni.showModal({
						content: permisionID + strStatus,
						showCancel: false
					});
				}
				console.log("strStatus = " + strStatus)
			},
			gotoGps() {
				if (uni.getSystemInfoSync().platform == 'ios') {
					let UIApplication = plus.ios.import("UIApplication");
					let NSURL = plus.ios.import("NSURL");
					let setting = NSURL.URLWithString("app-settings:");
					let application = UIApplication.sharedApplication();
					application.openURL(setting);
					plus.ios.deleteObject(setting);
					plus.ios.deleteObject(application);
				} else {
					let main = plus.android.runtimeMainActivity();
					let Intent = plus.android.importClass("android.content.Intent");
					let mIntent = new Intent('android.settings.LOCATION_SOURCE_SETTINGS');
					main.startActivity(mIntent);
				}
			}
		},
		onReady() {
			_this = this;
			//以后考虑 加个监听是否要刷新数据
			// if(_this.hours==null||_this.hours.length<=0){
			// 	for (let i = 0; i < 24; i++) {
			// 		_this.hours.push({
			// 			text: i,
			// 			checked: false
			// 		})
			// 	}
			// }
			_this.refreshPageByDate();


			//权限判断
			if (uni.getSystemInfoSync().platform == 'ios') {
				if (!permision.judgeIosPermission("location")) {
					permision.gotoAppPermissionSetting();
				}
				console.log("ios enter")
			} else {
				console.log("android enter")
				_this.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION");
			}
			if (!permision.checkSystemEnableLocation()) {
				uni.showModal({
					title: '提示',
					content: '请您打开定位服务！',
					success: function(res) {
						if (res.confirm) {
							_this.gotoGps()
						} else if (res.cancel) {
							_this.$utils.navBack()
						}
					}
				});
			}
		},
		onShow() {
			let _this = this;
			if (_this.refreshFlag === 'time_report') {
				_this.setRefresh('')
				_this.refreshPageByDate();
			} else if (_this.refreshFlag === 'am') {
				_this.setRefresh('')
				_this.refreshPageByDate();
			} else if (_this.refreshFlag === 'pm') {
				_this.setRefresh('')
				_this.refreshPageByDate();
			}

			//权限判断
			// if (uni.getSystemInfoSync().platform == 'ios') {
			// 	if (!permision.judgeIosPermission("location")) {
			// 		permision.gotoAppPermissionSetting();
			// 	}
			// 	console.log("ios enter")
			// }
			// else
			// {
			// 	console.log("android enter")
			// 	this.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION");
			// }
		},
		onLoad() {}
	}
</script>

<style scoped lang="scss">
	@import "@/common/css/main.css";

	page {
		width: 750rpx;
		min-height: 100%;
		background-color: #FFFFFF;
		display: flex;
	}

	.daily_paper {
		width: 750rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
	}

	.time_txt {
		font-size: 28rpx;
		font-weight: bold;
		color: #909090;
	}

	.center_line {
		margin-left: 20rpx;
		height: 1px;
		background: #E0E0E0
	}

	.center_back_select {
		height: 75rpx;
		line-height: 75rpx;

		background: rgba(230, 242, 251, 1);
	}

	.center_back_select text {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #909090;
	}

	.addPaper {
		width: 110rpx;
		height: 110rpx;
		background: #0089FD;
		box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.24);
		border-radius: 50%;
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
	}

	.select_options {
		width: 352rpx;
		height: 340rpx;
		background: #fff;
		box-shadow: 0px 0px 21rpx 0px rgba(0, 0, 0, 0.14);
		border-radius: 30rpx;
		position: absolute;
		right: 48rpx;
		bottom: 44rpx;
	}

	.circle_item {
		width: 54rpx;
		height: 54rpx;
		/* background:#DDDDDD; */
		border-radius: 50%
	}

	.option_item {
		/* height: 100rpx; */
		border-bottom: 1px solid #DDDDDD;
	}

	.option_item text {
		font-size: 28rpx;
		font-weight: bold;
		color: #454545;

	}

	.set_box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	/* 左侧时间 */
	.set_time {
		width: 10%;
		position: relative;

		view {
			width: 120%;
			position: absolute;
			margin-top: 55upx;
			right: -40rpx;
			color: #999999;
			font-size: 24rpx;
		}

	}

	/* 右侧内容 */
	.set-1 {
		width: 90%;
	}

	.set-2 {
		min-height: 240upx;
		border-radius: 10upx;
		width: 84%;
		margin-left: 100upx;
		margin-top: 40upx;
		padding-right: 10rpx;
		position: relative;


		.like_o {
			width: 100%;
			height: 100%;

			.like_h {
				color: #999999;

				.name_ {
					margin-right: 20rpx;
					font-size: 32rpx;
				}

				.time_ {
					font-size: 24rpx;
				}
			}

			.like_talk {
				margin-top: 20rpx;
				width: 95%;
				min-height: 100rpx;

				text {
					color: #333333;
				}
			}
		}

	}

	.set-2::after {
		content: '';
		/* 必须存在如果没有图标就留空 */
		top: -20upx;
		/* 定位 距离*/
		border-left: #0055ff 1px solid;
		/* 横线颜色 */
		left: -44upx;
		/* 定位 距离*/
		height: 120%;
		/* 高度 */
		position: absolute;
		/* 定位 */
	}

	.set-2::before {
		content: "\e64d";
		/* 必须存在如果没有图标就留空 在前面的 圆形点*/
		color: #0055ff;
		/* 设置颜色 */
		position: absolute;
		/* 定位 */
		left: -70upx;
		top: 10upx;
		/* 移动到左边 */
		font-weight: bold;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-family: "iconfont" !important;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-size: 54upx;
		/* 图标大小 */
		font-style: normal;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-webkit-font-smoothing: antialiased;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-moz-osx-font-smoothing: grayscale;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	}

	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
		/* IE9 */
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
		/* iOS 4.1- */
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
